Tags: plugin
Edition: creative
Tagline: Adjust photo transparency, brightness, and apply sepia and B&amp;W filters through the querystring. Nearly zero performance overhead - matrix-based.
Icon: cogs
Aliases: /plugins/simplefilters
Textclass: none


h1 SimpleFilters plugin

.markdown-body
	markdown: 
		This plugin provides grayscale, sepia, brightness, saturation, contrast, inversion, and alpha filtering options. It also includes beta support for rounded corners, although we suggest [CSS border-radius](http://caniuse.com/#search=border-radius) instead.  
		
		These filters are implemented as adjustment matrices and are processed by native code for very high performance.
		
		No forwards-compatibility is guaranteed for any SimpleFilters commands, but `s.roundcorners` is the least likely to be present in a future major release.


- image_width = 400
- cache_buster = 000002
- round_options = ["s.roundcorners=30", "s.roundcorners=45,0,45,0"]
- grey_options = ["s.grayscale=ry","s.grayscale=ntsc","s.grayscale=bt709","s.grayscale=flat"]
- sepia_options = ["s.sepia=true"]
- inversion_options = ["s.invert=true"]
- opacity_options = ["s.alpha=0.2", "s.alpha=0.4", "s.alpha=0.6", "s.alpha=0.8"]
- contrast_options = ["s.contrast=-0.8", "s.contrast=-0.4", "s.contrast=0.4", "s.contrast=0.8", "s.contrast=1"]
- brightness_options = ["s.brightness=-0.8", "s.brightness=-0.4", "s.brightness=0", "s.brightness=0.4", "s.brightness=0.8", "s.brightness=1"]


- saturation_options = ["s.saturation=-1", "s.saturation=-0.75", "s.saturation=-0.5", "s.saturation=-0.25", "s.saturation=0.25", "s.saturation=0.5", "s.saturation=0.75", "s.saturation=1"]

- image_options = round_options + grey_options + sepia_options + inversion_options + opacity_options + contrast_options + saturation_options

.row-fluid
  .span8.well
    .slider
      #flex1.flexslider
        ul.slides
          - random_image = "%03d" % Random.new.rand(1..30)
          - image_options.each do | opt |
            li
              img src="http://z.zr.io/rw/pluginexamples/example-#{random_image}.jpg?format=png&width=#{image_width}&#{opt}"
              .slide-caption.n.hidden-phone
                - if round_options.include? opt
                  h3 Rounded Corners
                - if grey_options.include? opt
                  h3 Easy Greyscale
                - if sepia_options.include? opt
                  h3 One Step Sepia
                - if inversion_options.include? opt
                  h3 Color Inversion
                - if opacity_options.include? opt
                  h3 Opacity
                - if contrast_options.include? opt
                  h3 Contrast
                - if brightness_options.include? opt
                  h3 Brightness
                - if saturation_options.include? opt
                  h3 Saturation
                p #{opt}
          ul.flex-direction-nav
            li: a.flex-prev href="#" Previous
            li: a.flex-next href="#" Next    
    br
    br
    p
      | Refresh for another image.
div.markdown-body
  markdown:
    ## Installation
    Either run `Install-Package ImageResizer.Plugins.SimpleFilters` in the NuGet package manager, or:

    1. Add `ImageResizer.Plugins.SimpleFilters.dll` to your project
    2. Add `<add name="SimpleFilters" />` inside `<resizer><plugins></plugins></resizer>` in Web.config.
    
    ## Usage

    **Note the order in which effects are applied *MAY CHANGE* in future releases.**

    * `s.grayscale=true|y|ry|ntsc|bt709|flat`  (true, ntsc, and y produce identical results)
    * `s.sepia=true`
    * `s.alpha= 0..1`
    * `s.brightness=-1..1`
    * `s.contrast=-1..1`
    * `s.saturation=-1..1`
    * `s.invert=true`
    * `s.roundcorners=radius|topleft,topright,bottomright,bottomleft` - 'radius' is a percentage between 0 and 100 of 1/2 the smaller of width and height. You can crop to a circle with `width=x&amp;height=x&amp;mode=crop&amp;s.roundcorners=100`
    

    ## Examples

    ![Original image](http://img.imageresizing.net/utah2.jpg;width=200)

    ### Evenly rounded

    `s.roundcorners=30`

    ![s.roundcorners=30](http://img.imageresizing.net/utah2.jpg;width=200;s.roundcorners=30)

    ### Specify individual radii

    `s.roundcorners=45,0,45,0`

    ![s.roundcorners=45,0,45,0](http://img.imageresizing.net/utah2.jpg;width=200;s.roundcorners=45,0,45,0)

    ### 4 ways to grayscale

    `s.grayscale`=`true|y|ry|ntsc|bt709|flat` (true, ntsc, and y produce identical results)

    The following examples use NTSC/Y/True, RY, BT709, and Flat respectively

    ![s.grayscale=true](http://img.imageresizing.net/utah2.jpg;width=200;s.grayscale=true)
    ![s.grayscale=ry](http://img.imageresizing.net/utah2.jpg;width=200;s.grayscale=ry)
    ![s.grayscale=bt709](http://img.imageresizing.net/utah2.jpg;width=200;s.grayscale=bt709)
    ![s.grayscale=flat](http://img.imageresizing.net/utah2.jpg;width=200;s.grayscale=flat)


    ### 1 way to sepia
    
    `s.sepia=true`

    ![s.sepia=true](http://img.imageresizing.net/utah2.jpg;width=200;s.sepia=true)

    ### Inversion

    `s.invert=true`
    
    ![s.invert=true](http://img.imageresizing.net/utah2.jpg;width=200;s.invert=true)

    ### Adjust opacity/alpha

    `s.alpha` = `0..1`

    For true transparency, combine with `format=png`. Otherwise, the image will be blended against `bgcolor`.

    ![s.alpha=0.25](http://img.imageresizing.net/utah.jpg;width=200;s.alpha=0.25)
    ![s.alpha=0.75](http://img.imageresizing.net/utah.jpg;width=200;s.alpha=0.75)
    ![s.alpha=0.85](http://img.imageresizing.net/utah.jpg;width=200;s.alpha=0.85)
    ![s.alpha=1](http://img.imageresizing.net/utah.jpg;width=200;s.alpha=1)

    ### Adjust contrast

    `s.contrast` = `-1..1`

    ![s.contrast=-0.80](http://img.imageresizing.net/utah.jpg;width=200;s.contrast=-0.99)
    ![s.contrast=-0.80](http://img.imageresizing.net/utah.jpg;width=200;s.contrast=-0.80)
    ![s.contrast=-0.40](http://img.imageresizing.net/utah.jpg;width=200;s.contrast=-0.40)
    ![s.contrast=-0.20](http://img.imageresizing.net/utah.jpg;width=200;s.contrast=-0.20)


    ![s.contrast=0](http://img.imageresizing.net/utah.jpg;width=200;s.contrast=0)

    ![s.contrast=0.20](http://img.imageresizing.net/utah.jpg;width=200;s.contrast=0.20)
    ![s.contrast=0.40](http://img.imageresizing.net/utah.jpg;width=200;s.contrast=0.40)
    ![s.contrast=0.80](http://img.imageresizing.net/utah.jpg;width=200;s.contrast=0.80)
    ![s.contrast=0.99](http://img.imageresizing.net/utah.jpg;width=200;s.contrast=0.99)

    ### Adjust brightness

    `s.brightness`=`-1..1`

    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.brightness=-1)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.brightness=-0.7)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.brightness=-0.5)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.brightness=-0.2)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.brightness=0)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.brightness=0.2)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.brightness=0.5)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.brightness=0.7)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.brightness=1)

    ### Adjust saturation
    `s.saturation` = `-1..1`


    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.saturation=-1)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.saturation=-0.9)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.saturation=-0.5)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.saturation=-0.2)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.saturation=0)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.saturation=0.2)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.saturation=0.5)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.saturation=0.9)
    ![](http://img.imageresizing.net/red-leaf.jpg;width=100;s.saturation=1)

    ### Legacy syntax (Before v3.1)

    * &amp;filter=grayscale
    * &amp;filter=sepia (didn't work)
    * &amp;filter=brightness(.1) (-1..1) (Change .1 to the brightness offset you want)
    * &amp;filter=alpha(.5)   (Change .5 to the alpha multiplier you want)
